<template>
  <div class="lvchen_qinghua">
    <div v-if="!inline" class="lvchen">
      <div class="content_title">
        <span class="content_text">滤尘</span>
      </div>

      <div class="lvchen_body">
        <div v-for="(item, index) in qinghuaData.qinghuaCol1Data" :key="index + '3'" class="lvchen_item">
          <qinghua :data="item"></qinghua>
        </div>
      </div>
    </div>
    <i class="wall"></i>
    <div class="qinghua">
      <div v-if="!inline" class="content_title" style="cursor: pointer" @click="showDialogTech">
        <span class="content_text">清花</span>
        <img class="content_img" src="@/assets/img/chart/qinghua.png" alt="" srcset="" />
      </div>

      <div class="qinghua_body qinghua_body1">
        <div class="peidianfang">
          <img src="@/assets/img/chart/peidianfang.svg" alt="" srcset="" />
        </div>
        <div class="qinghuaCol2">
          <div class="qinghuaCol2_item1">
            <div style="margin-top:10px">
              <div class="dongli" @click="clickHandleDl('qinghuaCol2_2')">
                <img src="@/assets/img/dongliguis.png" alt="" srcset="" />
              </div>
              <div v-if="zhuamianData3" @click="clickHandle('zhuamian', zhuamianData3)">
                <zhuamian :data="zhuamianData3"></zhuamian>
              </div>
            </div>
            <div v-for="(item, index) in [1, 0]" :key="index + '4'">
              <div class="item">
                <div class="item1" @click="clickHandle('kaimian', jinkaimainData2[item])">
                  <kaimian v-if="jinkaimainData2[item]" :data="jinkaimainData2[item]"></kaimian>
                </div>
                <div class="item2" @click="clickHandle('duocang', duocangData2[item])">
                  <duocang v-if="duocangData2[item]" :data="duocangData2[item]"></duocang>
                </div>
              </div>
            </div>
            <div v-for="(item, index) in [1]" :key="index + '3'">
              <div class="item">
                <div class="item1" @click="clickHandle('kaimian', jinkaimainData1[item])">
                  <kaimian :data="jinkaimainData1[item]"></kaimian>
                </div>
                <div class="item2" @click="clickHandle('duocang', duocangData1[item])">
                  <duocang :data="duocangData1[item]"></duocang>
                </div>
              </div>
            </div>
            <div style="margin-top:10px">
              <div class="dongli" @click="clickHandleDl('qinghuaCol2_2')">
                <img src="@/assets/img/dongliguis.png" alt="" srcset="" />
              </div>
              <div v-if="zhuamianData2" @click="clickHandle('zhuamian', zhuamianData2)">
                <zhuamian :data="zhuamianData2"></zhuamian>
              </div>
            </div>
          </div>
          <div class="qinghuaCol2_item2">
            <div v-for="(item, index) in [0]" :key="index + '3'">
              <div class="item">
                <div class="item1" @click="clickHandle('kaimian', jinkaimainData1[item])">
                  <kaimian :data="jinkaimainData1[item]"></kaimian>
                </div>
                <div class="item2" @click="clickHandle('duocang', duocangData1[item])">
                  <duocang :data="duocangData1[item]"></duocang>
                </div>
              </div>
            </div>
            <div style="margin-top:10px">
              <div v-if="zhuamianData1" @click="clickHandle('zhuamian', zhuamianData1)">
                <zhuamian :data="zhuamianData1"></zhuamian>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 抓棉弹窗控件 -->
      <zhuamianDialog1 :defaultData="data1" v-if="showModal1_1" ref="zhuamianDialog1"></zhuamianDialog1>
      <zhuamianDialog2 :defaultData="data1" v-if="showModal1_2" ref="zhuamianDialog2"></zhuamianDialog2>
      <zhuamianDialog3 :defaultData="data1" v-if="showModal1_3" ref="zhuamianDialog3"></zhuamianDialog3>
      <!-- 多仓弹窗控件 -->
      <duocangDialog1 :defaultData="data2" v-if="showModal2_1" ref="duocangDialog1"></duocangDialog1>
      <duocangDialog2 :defaultData="data2" v-if="showModal2_2" ref="duocangDialog2"></duocangDialog2>
      <!-- 多开棉窗控件 -->
      <kaimianDialog1 :defaultData="data3" v-if="showModal3_1" ref="kaimianDialog1"></kaimianDialog1>
      <kaimianDialog2 :defaultData="data3" v-if="showModal3_2" ref="kaimianDialog2"></kaimianDialog2>
      <kaimianDialog3 :defaultData="data3" v-if="showModal3_3" ref="kaimianDialog3"></kaimianDialog3>
      <!-- 动力柜弹窗控件 -->
      <dongliDialog v-if="showDongliModal" ref="dongliDialog" />
      <!-- 清花工艺详情 -->
      <qinghua-dialog-tech v-if="techShow" ref="qinghuaDialogTech"></qinghua-dialog-tech>
    </div>
  </div>
</template>

<script>
import dongliDialog from '@/views/monitorCenter/workChart/components/qcs/dialog/dialog_dongli/index'
import zhuamianDialog1 from '@/views/monitorCenter/workChart/components/qcs/dialog/dialog_zhuamian_fb1011/index'
import zhuamianDialog2 from '@/views/monitorCenter/workChart/components/qcs/dialog/dialog_zhuamian_jwf1011/index'
import zhuamianDialog3 from '@/views/monitorCenter/workChart/components/qcs/dialog/dialog_zhuamian_jwf10116/index'
import duocangDialog1 from '@/views/monitorCenter/workChart/components/qcs/dialog/dialog_duocang_fb1029/index'
import duocangDialog2 from '@/views/monitorCenter/workChart/components/qcs/dialog/dialog_duocang_jwf1027/index'
import kaimianDialog1 from '@/views/monitorCenter/workChart/components/qcs/dialog/dialog_kaimian_fb1115/index'
import kaimianDialog2 from '@/views/monitorCenter/workChart/components/qcs/dialog/dialog_kaimian_jwf1115/index'
import kaimianDialog3 from '@/views/monitorCenter/workChart/components/qcs/dialog/dialog_kaimian_jwf1116/index'
import qinghua from '@/views/monitorCenter/workChart/components/qcs/qinghua'
import zhuamian from '@/views/monitorCenter/workChart/components/qcs/zhuamian'
import duocang from '@/views/monitorCenter/workChart/components/qcs/duocang'
import kaimian from '@/views/monitorCenter/workChart/components/qcs/kaimian'
import COMMON from '@/utils/common'
import dongLiMenu from '@/assets/data/dongli.json'
import dongliItem from '@/assets/data/dongliItem.json'
export default {
  name: 'QingHua_5',
  props: {
    msg: String,
    // 是否嵌套在弹窗内
    inline: {
      type: Boolean,
      default: false
    }
  },
  components: {
    dongliDialog,
    zhuamianDialog1,
    zhuamianDialog2,
    zhuamianDialog3,
    duocangDialog1,
    duocangDialog2,
    kaimianDialog1,
    kaimianDialog2,
    kaimianDialog3,
    qinghua,
    kaimian,
    duocang,
    zhuamian
  },
  // 组件相互调用 需在beforeCreate注册
  beforeCreate: function() {
    this.$options.components.qinghuaDialogTech = require('@/views/monitorCenter/workChart/components/qcs/dialogBig/dialog_qinghua_tech/index').default
  },
  created() {
    this.dongLiMenu = dongLiMenu
    this.dongLiItem = dongliItem
  },
  data() {
    return {
      zhumianShow: false,
      zhuamianData1: null,
      zhuamianData2: null,
      zhuamianData3: null,
      jinkaimainData1: [],
      jinkaimainData2: [],
      duocangData1: [],
      duocangData2: [],
      qinghuaData: {
        qinghuaCol1Data: [
          { deviceNo: 1, status: 1, efficiency: 100 },
          { deviceNo: 2, status: 1, efficiency: 100 },
          { deviceNo: 3, status: 1, efficiency: 100 },
          { deviceNo: 4, status: 1, efficiency: 100 },
          { deviceNo: 5, status: 1, efficiency: 100 },
          { deviceNo: 6, status: 1, efficiency: 100 }
        ]
      },
      showModal1_1: false,
      showModal1_2: false,
      showModal1_3: false,
      showModal2_1: false,
      showModal2_2: false,
      showModal3_1: false,
      showModal3_2: false,
      showModal3_3: false,
      showDongliModal: false,
      techShow: false,
      data1: {},
      data2: {},
      data3: {}
    }
  },
  computed: {
    zhuaMianGroupState() {
      let result
      if (this.$store.state.socketData.length != 0) {
        result = this.$store.state.socketData.filter(item => item.workshop == this.$store.state.workshopNo)
        result = result[0].dsDeviceRealTimeStatusListBlowingZm
      }
      return result
    },
    kaiMianGroupState() {
      let result
      if (this.$store.state.socketData.length != 0) {
        result = this.$store.state.socketData.filter(item => item.workshop == this.$store.state.workshopNo)
        result = result[0].dsDeviceRealTimeStatusListBlowingJkm
      }
      return result
    },
    duoCangGroupState() {
      let result
      if (this.$store.state.socketData.length != 0) {
        result = this.$store.state.socketData.filter(item => item.workshop == this.$store.state.workshopNo)
        result = result[0].dsDeviceRealTimeStatusListBlowingDc
      }
      return result
    }

    // qingHuaGroupState() {
    //   return this.$store.state.qingHuaGroupState;
    // },
  },
  watch: {
    zhuaMianGroupState: {
      immediate: true,
      handler(val) {
        if (val) {
          this.zhuamianData1 = val.find(item => item.deviceNo == '1')
          this.zhuamianData2 = val.find(item => item.deviceNo == '2')
          this.zhuamianData3 = val.find(item => item.deviceNo == '3')
        }
      }
    },
    kaiMianGroupState: {
      immediate: true,
      handler(val) {
        if (val) {
          this.jinkaimainData1 = COMMON.devSnFilter(val, 1, 2)
          this.jinkaimainData2 = COMMON.devSnFilter(val, 3, val.length)
        }
      }
    },
    duoCangGroupState: {
      immediate: true,
      handler(val) {
        if (val) {
          this.duocangData1 = COMMON.devSnFilter(val, 1, 2)
          this.duocangData2 = COMMON.devSnFilter(val, 3, val.length)
        }
      }
    }
  },
  methods: {
    closeHandle() {
      this.showModal1_1 = false
      this.showModal1_2 = false
      this.showModal1_3 = false
      this.showModal2_1 = false
      this.showModal2_2 = false
      this.showModal3_1 = false
      this.showModal3_2 = false
      this.showModal3_3 = false
      this.showDongliModal = false
    },
    clickHandle(flag, item) {
      switch (flag) {
        case 'zhuamian':
          this.data1 = item
          this.data1.classes = this.$store.state.workshopData.shiftPreSpinTxt
          switch (item.deviceTable) {
            case 'zjc_fb1011':
              this.showModal1_1 = true
              break
            case 'zjc_jwf1011':
              this.showModal1_2 = true
              break
            case 'zjc_jwf10116':
              this.showModal1_3 = true
              break
            default:
              this.showModal1_1 = true
              break
          }
          break
        case 'duocang':
          this.data2 = item
          this.data2.classes = this.$store.state.workshopData.shiftPreSpinTxt
          switch (item.deviceTable) {
            case 'zjc_fb1029':
              this.showModal2_1 = true
              break
            case 'zjc_jwf1027':
              this.showModal2_2 = true
              break
            default:
              this.showModal2_1 = true
              break
          }
          break
        case 'kaimian':
          this.data3 = item
          this.data3.classes = this.$store.state.workshopData.shiftPreSpinTxt
          switch (item.deviceTable) {
            case 'zjc_fb1115':
              this.showModal3_1 = true
              break
            case 'zjc_jwf1115':
              this.showModal3_2 = true
              break
            case 'zjc_jwf1116':
              this.showModal3_3 = true
              break
            default:
              this.showModal3_1 = true
              break
          }
          break
      }
    },
    clickHandleDl(item, deviceName) {
      this.showDongliModal = true
      var dialogData = this.dongLiItem[`${item}_${this.$store.state.workshopNo}`]
      this.$nextTick(() => {
        this.$refs.dongliDialog.showDialog(dialogData)
      })
    },
    showDialogTech() {
      this.techShow = true
    },
    closeDialogTech() {
      this.techShow = false
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/less/workshop.less';
</style>
